{% extends 'base.html' %}
{% block title %}
    SQL生成小工具
{% endblock %}
{% block styles %}
    <style>
        {{ super() }}
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 1600px;
            margin: 0 auto;
        }

        #topBtn {
            width: 450px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            padding-top: 20px;
        }

        #box1 {
            width: 100%;
            display: block;
        }

        #box1 .table {
            border-collapse: collapse;
        }

        #box1 .table td,
        #box1 .table th {
            padding: 5px 13px;
            box-sizing: border-box;
            text-align: center;
            vertical-align: middle;
        }

        #box1 .table td #delete_button {
            text-decoration: none;
            color: #fff;
        }

        #box1 .table .nameTd {
            max-width: 270px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        #hide {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
            display: none;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            padding-top: 300px;
        }

        #hide span {
            animation: move 0.8s linear 0s infinite;
        }

        #box2 {
            display: none;
        }

        #box2 .formOne button {
            margin-top: 20px;
        }

        #box3 {
            width: 100%;
            display: none;
        }

        #box3 {
            width: 450px;
            margin: 0 auto;
            font-size: 22px;
            color: red;
        }

        #box3 ul li {
            font-size: 18px;
            list-style: square;
            margin-left: 22px;
        }

        #box3 form {
            width: 105px;
            margin: 0 auto;
        }

        #box3 form .layui-btn {
            font-size: 26px;
        }

        #box3 form a {
            text-decoration: none;
            color: #fff;
        }

        @keyframes move {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        {# 输入框的label #}
        .layui-form-label {
            width: 90px !important;
        }

        #queryBox {
            display: flex;
            justify-content: space-around;
            margin-top: 30px;
        }

        #queryBox .btn .resetBtn a {
            color: #fff;
        }
    </style>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <!-- 引入 layui.js -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    {#    <script src="layDate/laydate/laydate.js"></script>#}
{% endblock %}
{% block scripts %}
    {{ super() }}
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <script>
        $('.search_a').click(function () {
            let hrefs = $('.search_a').attr("href");
            hrefs+="&mission_name={{ mission_name }}&mission_date_start={{ mission_date_start }}&mission_date_end={{ mission_date_end }}";
            $('.search_a').attr("href",hrefs);
        });

        //日期配置
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //日期范围
            laydate.render({
                elem: '#test6'
                //设置开始日期、日期日期的 input 选择器
                //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
                , range: ['#test-startDate-1', '#test-endDate-1']
            });
        });
        {# 点击执行，显示模板 #}
        document.getElementById("implement").onclick = function () {
            document.getElementById("hide").style.display = "block";
        };
        {# 显示任务展示模块，隐藏其他 #}
        document.getElementById("templateImport").onclick = function () {
            document.getElementById("templateImport").className = "layui-btn layui-btn layui-btn-normal";
            document.getElementById("newTask").className = "layui-btn layui-btn-primary layui-border-blue";
            document.getElementById("templateExport").className = "layui-btn layui-btn-primary layui-border-blue";
            document.getElementById("box1").style.display = "block";
            document.getElementById("box2").style.display = "none";
            document.getElementById("box3").style.display = "none";
        };
        {# 显示新建任务模块，隐藏其他 #}
        document.getElementById("newTask").onclick = function () {
            document.getElementById("templateImport").className = "layui-btn layui-btn-primary layui-border-blue";
            document.getElementById("newTask").className = "layui-btn layui-btn layui-btn-normal";
            document.getElementById("templateExport").className = "layui-btn layui-btn-primary layui-border-blue";
            document.getElementById("box1").style.display = "none";
            document.getElementById("box2").style.display = "block";
            document.getElementById("box3").style.display = "none";
        };
        {# 显示模板导出模块，隐藏其他 #}
        document.getElementById("templateExport").onclick = function () {
            document.getElementById("templateImport").className = "layui-btn layui-btn-primary layui-border-blue";
            document.getElementById("newTask").className = "layui-btn layui-btn-primary layui-border-blue";
            document.getElementById("templateExport").className = "layui-btn layui-btn layui-btn-normal";
            document.getElementById("box1").style.display = "none";
            document.getElementById("box2").style.display = "none";
            document.getElementById("box3").style.display = "block";
        }
    </script>
{% endblock %}
{% block newcontent %}
    <div id="box">
        <div id="topBtn">
            <button id="templateImport" class="layui-btn layui-btn layui-btn-normal">任务展示</button>
            <button id="newTask" class="layui-btn layui-btn-primary layui-border-blue">新建任务</button>
            <button id="templateExport" class="layui-btn layui-btn-primary layui-border-blue">模板导出</button>
        </div>

        <form action="{{ url_for('desen.mission_search') }}">
            <div id="queryBox" class="layui-form">
                <input type="text" class="searchBox layui-input col-sm-2" placeholder="请输入查询内容" name="mission_name">
                <div class="dateBox layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">日期范围</label>
                        <div class="layui-inline" id="test6">
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" id="test-startDate-1" class="layui-input"
                                       name="mission_date_start"
                                       placeholder="开始日期">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" id="test-endDate-1" class="layui-input"
                                       name="mission_date_end"
                                       placeholder="结束日期">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btn">
                    <button type="submit" class="queryBtn layui-btn layui-btn-normal">提交</button>
                    <button type="button" class="resetBtn layui-btn layui-btn-normal"><a
                            href=" {{ url_for('desen.desen_index') }} ">重置</a></button>
                </div>
            </div>
        </form>

        <hr>
        {# 如果有文件上传时,必须在form里加上enctype="multipart/form-data" #}
        {#任务展示模块#}
        <div id="box1">
            <table class="table layui-table" lay-skin="line">
                <tr>
                    <td>序号</td>
                    <td>任务名称</td>
                    <td>上传的Excel</td>
                    <td>建表文件</td>
                    <td>脱敏文件</td>
                    <td>错误日志</td>
                    <td>时间</td>
                </tr>
                {% for desen in pagination.items %}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td class="nameTd" title={{ desen.mission_name }}>{{ desen.mission_name }}</td>
                        <td><a href="{{ desen.excel_loc }}" download="{{ desen.excel_name }}">{{ desen.excel_name }}</a>
                        </td>
                        <td><a href="{{ desen.create_sql_loc }}"
                               download="{{ desen.create_sql_name }}">{{ desen.create_sql_name }}</a></td>
                        <td><a href="{{ desen.insert_sql_loc }}"
                               download="{{ desen.insert_sql_name }}">{{ desen.insert_sql_name }}</a></td>
                        {% if desen.error_sql_name=='no_error' %}
                            <td>校验无误,分区字段一致</td>
                        {% else %}
                            <td><a href="{{ desen.error_sql_loc }}"
                                   download="{{ desen.error_sql_name }}">{{ desen.error_sql_name }}</a></td>
                        {% endif %}
                        <td>{{ desen.insert_time }}</td>
                    </tr>
                {% endfor %}
            </table>
            {% if search_flag=='N' %}
                <nav aria-label="Page navigation" class="col-md-offset-5">
                    <ul class="pagination">
                        {% if not pagination.has_prev %}
                            <li class="disabled"><span href="#" aria-label="Previous">&laquo;</span></li>
                        {% else %}
                            <li><a href="{{ url_for('desen.desen_index') }}?page={{ pagination.prev_num }}"
                                   aria-label="Previous"><span
                                    aria-hidden="true">&laquo;</span></a></li>
                        {% endif %}
                        {% for page_num in range(1,pagination.pages + 1) %}
                            <li {% if pagination.page==page_num %} class="active" {% endif %}><a
                                    href="{{ url_for('desen.desen_index') }}?page={{ page_num }}">{{ page_num }}</a>
                            </li>
                        {% endfor %}
                        {% if not pagination.has_next %}
                            <li class="disabled"><span href="#" aria-label="Next" aria-hidden="true">&raquo;</span></li>
                        {% else %}
                            <li><a
                                    href="{{ url_for('desen.desen_index') }}?page={{ pagination.next_num }}"
                                    aria-label="Next"><span
                                    aria-hidden="true">&raquo;</span></a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% elif search_flag=='Y' %}
                <nav aria-label="Page navigation" class="col-md-offset-5">
                    <ul class="pagination">
                        {% if not pagination.has_prev %}
                            <li class="disabled"><span href="#" aria-label="Previous">&laquo;</span></li>
                        {% else %}
                            <li>
                                <a class="search_a" href="{{ url_for('desen.mission_search') }}?page={{ pagination.prev_num }}"
                                   aria-label="Previous"><span
                                        aria-hidden="true">&laquo;</span></a></li>
                        {% endif %}
                        {% for page_num in range(1,pagination.pages + 1) %}
                            <li {% if pagination.page==page_num %} class="active" {% endif %}><a class="search_a"
                                    href="{{ url_for('desen.mission_search') }}?page={{ page_num }}">{{ page_num }}</a>
                            </li>
                        {% endfor %}
                        {% if not pagination.has_next %}
                            <li class="disabled"><span href="#" aria-label="Next" aria-hidden="true">&raquo;</span></li>
                        {% else %}
                            <li><a class="search_a"
                                    href="{{ url_for('desen.mission_search') }}?page={{ pagination.next_num }}"
                                    aria-label="Next"><span
                                    aria-hidden="true">&raquo;</span></a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
        {#新建任务模块#}
        <div id="box2">
            <form class="formOne form-horizontal" action="{{ url_for('desen.excel_upload') }}" method="post"
                  enctype="multipart/form-data">
                {% if msg %}
                    <script>
                        alert("{{ msg }}")
                    </script>
                {% endif %}
                <div class="form-group">
                    <label class="col-sm-4 control-label">名称</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" placeholder="请输入任务名称"
                               name="mission_name">
                    </div>
                </div>
                <input type="file" name="excel_file" class="choiceFile col-sm-offset-4">
                <button type="submit" id="implement" class="col-sm-offset-4 layui-btn layui-btn-normal">提交任务</button>
            </form>
        </div>
        {#模板导出模块#}
        <div id="box3">
            <div>
                注意事项：
                <ul>
                    <li>请不要更改表头名称</li>
                    <li>请不要修改Sheet表名称</li>
                    <li>仅支持.xlsx格式的文件</li>
                    <li>请用英文命名excel文件</li>
                </ul>
            </div>
            <form>
                <button type="submit" class="layui-btn layui-btn-lg layui-btn-normal"><a
                        href="..\static\template\template.xlsx"
                        download="template.xlsx">下载</a></button>
            </form>
        </div>
        <div id="hide"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></div>
    </div>

{% endblock %}